<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<style>
			.mui-input-row label {
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
				line-height: 1.1;
				float: left;
				width: 35%;
				padding: 11px 5px;
				font-size: 14px;
				color: #666;
			}
			
			.mui-input-div {
				background: white;
				margin-top: 5px;
				margin-left: 5px;
				margin-right: 5px;
			}
			
			.mui-btn {
				border: 1px solid #25CDDA;
				width: 300px;
				background-color: #25CDDA;
			}
			
			.mui-btn:active {
				border: 1px solid #58dde8!important;
				background-color: #58dde8!important;
			}
			
			.mui-bar-nav {
				background: #27CDDB;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">银行卡绑定</h1>
		</header>
		<div class="mui-content">
			<p style="margin: 10px;">
				**请务必填写本人真实信息，随意填写信息或盗用他人信息，一经发现直接封号。
			</p>
			<div class="mui-input-row mui-input-div">
				<label>银行卡号:</label>
				<input id="bankCardNumber" type="text" class="mui-input-clear" placeholder="请输入银行卡号">
			</div>
			<div class="mui-input-row mui-input-div">
				<label>银行名称:</label>
				<select id="bankName" onchange="changeBankName()"></select>
			</div>
			<div class="mui-input-row mui-input-div" style="display: none;" id="outherBank">
				<label>其它名称:</label>
				<input id="bankName1" type="text" class="mui-input-clear" placeholder="请输入银行名称">
			</div>
			<div class="mui-input-row mui-input-div">
				<label>支行名称:</label>
				<input id="bankNameBranch" type="text" class="mui-input-clear" placeholder="请输入支行名称">
			</div>
			<div class="mui-button-row" style="margin-bottom: 20px;margin-top: 10px;">
				<button type="button" class="mui-btn mui-btn-primary" id="confirm">确认提交</button>&nbsp;&nbsp;
			</div>
		</div>

		<script src="../js/mui.min.js "></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript" src="../js/validator.min.js"></script>
		<script type="text/javascript ">
			mui.init();
			var member = null;
			mui.plusReady(function() {
				swipeBack();
				member = JSON.parse(plus.storage.getItem("member"));
				document.getElementById("bankCardNumber").value = member.bankCardNumber;
				var config = JSON.parse(plus.storage.getItem("config"));
				var isOtherBank = true;
				mui.each(config.bank, function(i, item) {
					var op = document.createElement("option");
					op.setAttribute("value", item.value);
					if(member.bankName == item.value) {
						op.setAttribute("selected", "selected");
						isOtherBank = false;
					}
					op.appendChild(document.createTextNode(item.value));
					document.getElementById("bankName").appendChild(op);
				});
				if(isOtherBank) {
					document.getElementById("bankName").selectedIndex = document.getElementById("bankName").options.length - 1;
					document.getElementById("bankName1").value = member.bankName;
				}
				changeBankName();
			})

			document.getElementById('confirm').addEventListener('tap', function() {
				var bankCardNumber = document.getElementById('bankCardNumber').value;
				if(!bankCardNumber) {
					mymui("请输入银行卡号");
					return;
				}
				if(!validator.isNumeric(bankCardNumber)) {
					mymui("请输入正确银行卡号");
					return;
				}
				if(!validator.isLength(bankCardNumber, {
						min: 10
					})) {
					mymui("请输入正确银行卡号");
					return;
				}
				
				if(getBankName() == "") {
					mymui("请输入银行名称");
					return;
				}
				modify(bankCardNumber);
			});

			function modify(bankCardNumber) {
				mui.postJSON(ModifyAlipay, {
					"bankCardNumber": bankCardNumber,
					"bankName": getBankName(),
					"bankNameBranch": document.getElementById('bankNameBranch').value
				}, function(data) {
					var code = data.code;
					if(code == 0) {
						// 显示自动消失的提示消息
						plus.nativeUI.toast("银行卡绑定成功");
						member.bankCardNumber = bankCardNumber;
						member.bankName = getBankName();
						member.bankNameBranch = document.getElementById('bankNameBranch').value;
						plus.storage.setItem("member", JSON.stringify(member));
						openSetting();
					} else {
						mymui(data.msg);
					}
				});
			}

			function openSetting() {
				//触发详情页面的setUserState事件
				mui.fire(plus.webview.getWebviewById('setting'), 'setUserState', {});
				//打开
				mui.back();
			}
			
			function changeBankName() {
				if(document.getElementById('bankName').value == "其它银行") {
					document.getElementById("outherBank").style.display = "";
				} else {
					document.getElementById("outherBank").style.display = "none";
				}
			}
			
			function getBankName() {
				if(document.getElementById('bankName').value == "其它银行") {
					return document.getElementById('bankName1').value;
				} else {
					return document.getElementById('bankName').value;
				}
			}
		</script>
	</body>

</html>